<template>
  <div class="arco-spin-mask">
    <div class="loading-container">
      <div
        class="line"
        :style="{ '--color': '#3370ff', '--ani': 'rotate1', '--d': '-0.8s' }"
      />
      <div
        class="line"
        :style="{ '--color': '#3370ff', '--ani': 'rotate2', '--d': '-0.4s' }"
      />
      <div
        class="line"
        :style="{ '--color': '#3370ff', '--ani': 'rotate3', '--d': '0s' }"
      />
    </div>

    <span
      v-if="props.loadingText"
      class="loading-text"
    >
      {{ props.loadingText }}
    </span>
  </div>
</template>

<script setup lang="ts">
  // 可以在需要loading效果的元素上使用v-loading指令(值为Boolean类型)
  // 在v-loading绑定的元素上使用自定义属性loading-text(String类型)来显示加载中的描述文案
  defineOptions({
    name: "Loading",
  });

  const props = defineProps({
    loadingText: {
      type: String,
      default: "",
    },
  });
</script>

<style scoped lang="less">
  .arco-spin-mask {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .loading-container {
      width: 3rem;
      height: 3rem;
      transform-style: preserve-3d;
      perspective: 40rem;
      pointer-events: none;

      .line {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border-bottom: 1px solid var(--color);
        animation: var(--ani) 1.15s linear infinite;
        animation-delay: var(--d);
      }
    }

    .loading-text {
      margin-top: 12px;
      color: #a7aebe;
    }
  }
</style>

<style>
  @keyframes rotate1 {
    0% {
      transform: rotateX(35deg) rotateY(-45deg) rotate(0);
    }
    to {
      transform: rotateX(35deg) rotateY(-45deg) rotate(1turn);
    }
  }
  @keyframes rotate2 {
    0% {
      transform: rotateX(50deg) rotateY(10deg) rotate(0);
    }
    to {
      transform: rotateX(50deg) rotateY(10deg) rotate(1turn);
    }
  }
  @keyframes rotate3 {
    0% {
      transform: rotateX(35deg) rotateY(55deg) rotate(0);
    }
    to {
      transform: rotateX(35deg) rotateY(55deg) rotate(1turn);
    }
  }
</style>
